<template>
    <div class="login">
        <div class="login_container" :style="marginTop">
            <div class="login_info">
                <keep-alive>
                    <component :is="currentComponent"></component>
                </keep-alive>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import login from '@layout/login.vue'
import update_pwd from '@layout/update_pwd.vue'

export default {
  components: {
    login,
    update_pwd
  },
  data () {
    return {
      marginTop: {}
    }
  },
  mounted () {
    this.getMarginTop()
    window.onresize = () => {
      this.getMarginTop()
    }
  },
  computed: {
    currentComponent () {
      const routerName = this.$route.name
      return routerName
    }
  },
  methods: {
    getMarginTop () {
      const height = document.body.clientHeight
      this.marginTop = {
        margin: (height - 550) / 2 + 'px auto'
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.login
    height 100%
    background: url(https://ocr-data.cdn.bailian-ai.com/Picture/ocr_bg.png) center no-repeat;
    background-size cover
    overflow hidden

    .login_container
        width 680px
        height 550px
        background: url(https://ocr-data.cdn.bailian-ai.com/Picture/ocr_login.png) center no-repeat;
        background-size 100% 100%
        background-position 22px -28px
        position relative
        overflow hidden

        .login_info
            width 400px
            height 300px
            margin 100px auto
</style>
